<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <div class="grid-content bg-purple">-->
<!--            <el-form-item label="所属机构" prop="partyGroupCode" style="margin-right:15px">-->
<!--              <el-select v-model="form.partyGroupCode" placeholder="请选择机构" clearable style="width: 100%">-->
<!--                <el-option-->
<!--                  v-for="item in partyGroup"-->
<!--                  :key="item.code"-->
<!--                  :label="item.groupName"-->
<!--                  :value="item.code"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="名称" prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">

            <el-form-item label="类型" prop="type" style="margin-right:15px">
            <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%" >
              <el-option value="0" label="单位" />
              <el-option value="1" label="辅助单位" />
            </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button> 
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import request from "@/utils/request";
// import partyGroupSelect from '@/views/components/partyGroupSelect.vue'

Vue.use(VXETable);
export default {
  name: "UnitAdd",
  components: {
    // partyGroupSelect
  },

  data() {
    return {
      isDisable:false, 
      form: {
        code: "",
        name: "",
        type: "",
        // partyGroupCode:'',
      },
      // partyGroup:[],
      rules: {
        partyGroupCode: [
          { required: true, message: '请选择所属机构', trigger: 'blur' }
        ],

        code: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        type: [
          {
            required: true,
            message: "请输入类型",
            trigger: "blur"
          },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    // 重置
    reset(){
      this.$refs['form'].resetFields()
    },


    // 提交
    funcSubmit() {
      
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.isDisable = true 
          const rLoading = this.openLoading();
          const data = this.form;
          request({
            url: "/arpa-basic-api/unit",
            method: "post",
            params: data
          })
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.isDisable = false 
              this.$emit("fatherAddMethod");
            })
            .then(() => this.$refs["form"].resetFields()).catch(() => this.isDisable = false)

        } else {
          return false;
        }
      });
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "add");
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
